<template>
  <div id="dedicated">
    <!--最终良率-->
    <line-barChart class="item_charts" :options="finalYieldRate">
      <template #default>
        <el-select
            v-model="v1"
            placeholder="Select"
            size="small"
            style="position: absolute; width: 100px;margin: 3px 0 0 5px;z-index: 4!important;"
            @change="updateWorkplaces"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </template>
    </line-barChart>
    <!--直通率-->
    <line-barChart class="item_charts" :options="throughRate"></line-barChart>
    <!--不良柏拉图-->
    <line-barChart class="item_charts" :options="Plato">
      <template #default>
        <el-select
            v-model="v2"
            placeholder="Select"
            size="small"
            style="position: absolute; width: 100px;margin: 3px 0 0 5px;z-index: 4"
            @change="updateMonth"
        >
          <el-option
              v-for="item in lengrnOptios"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </template>

    </line-barChart>
    <!--电压箱线图-->
    <line-barChart class="item_charts" :options="voltageBox"></line-barChart>
  </div>
</template>

<script setup>
import {ElSelect, ElOption} from 'element-plus'
import lineBarChart from '../components/dedicatedComponent/lineBarChart.vue';

defineComponent({
  lineBarChart
})
import {defineComponent, onBeforeMount, onMounted, ref} from "vue";
import {candlestick, lineBar} from "../components/dedicatedComponent/mock";

const v1 = ref('zjjb')
const v2 = ref('3月')

const options = [
  {
    value: 'zjjb',
    label: '正极搅拌',
  },
  {
    value: 'zjyj',
    label: '正极匀浆',
  },
]

const lengrnOptios = ref([])

// 最终良率
const finalYieldRate = ref({})

// 直通率
const throughRate = ref({})

// 柏拉图
const Plato = ref({})

// 电压箱线图
const voltageBox = ref({})

// 修改月份
const updateMonth = (_value) => {
  initPlato()
  // 更新全部的图标
}
// 修改工序号
const updateWorkplaces = (_val) => {
  // 根据工序号去查询 todo
  initData()
}
// 初始化最终良率
const initYieldRate = () => {
  // finalYieldRate.value
  // 需要的数据 todo
  let obj = {
    "3月": [15624, 94],
    "4月": [99.3966, 90],
    "W1": [99.2167, 90],
    "W2": [1799, 100],
    "2024/4/6": [623, 100],
    "2024/4/7": [500, 100],
    "2024/4/8": [676, 100],
  }

  lengrnOptios.value = Object.keys(obj).map((item) => ({value: item, label: item}))

  let op = new lineBar()
  // 设置横坐标 todo
  op.setXAxis(Object.keys(obj))

  // 设定纵坐标 todo
  let legend = ['投入', '最终良率',]
  op.setLegend(legend)

  // 设定title todo
  op.setTitle('ocv1最终良率')

  // 设定数据 todo
  let startArr = Array.from({length: legend.length}, () => [])
  // return
  let data = Object.values(obj).reduce((pre, cur) => {
    //legend
    for (let i = 0; i < legend.length; i++) {
      pre[i].push(cur[i])
    }
    return pre
  }, startArr)

  let seriesArr = [
    {
      name: '投入',
      type: 'bar',
      color: 'rgb(27,207,200)',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: []
    },
    {
      name: '最终良率',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        }
      },
      yAxisIndex: 1, // 这个指定的是哪个y轴 todo
      color: 'red',
      data: []
    },
  ]
  op.setData(seriesArr)


  op.setSeriesData(data)


  finalYieldRate.value = op.getChartOption()
}
// 初始化直通率
const initThroughRate = () => {
// 需要的数据 todo
  let obj = {
    "3月": [15624, 94],
    "4月": [3966, 90],
    "W1": [2167, 90],
    "W2": [1799, 100],
    "2024/4/6": [623, 100],
    "2024/4/7": [500, 100],
    "2024/4/8": [676, 100],
  }

  lengrnOptios.value = Object.keys(obj).map((item) => ({value: item, label: item}))

  let op = new lineBar()
  // 设置横坐标 todo
  op.setXAxis(Object.keys(obj))

  // 设定纵坐标 todo
  let legend = ['投入', '直通率',]
  op.setLegend(legend)

  // 设定title todo
  op.setTitle('ocv1直通率')

  // 设定数据 todo


  let seriesArr = [
    {
      name: '投入',
      type: 'bar',
      color: 'rgb(27,207,200)',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: []
    },
    {
      name: '直通率',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        }
      },
      yAxisIndex: 1, // 这个指定的是哪个y轴 todo
      color: 'red',
      data: []
    },
  ]
  op.setData(seriesArr)

  let startArr = Array.from({length: legend.length}, () => [])

  // return
  let data = Object.values(obj).reduce((pre, cur) => {
    //legend
    for (let i = 0; i < legend.length; i++) {
      pre[i].push(cur[i])
    }
    return pre
  }, startArr)
  op.setSeriesData(data)

  throughRate.value = op.getChartOption()
}

// 初始化不良柏拉图
const initPlato = () => {
  // 需要的数据 todo
  let obj = {
    "3月": [{
      name: "电压低不良",
      value_err_count: 10,
      value_err_percent: 94
    }, {
      name: "电压高不良",
      value_err_count: 4,
      value_err_percent: 4
    }],
    "4月": [{
      name: "电压低不良",
      value_err_count: 5,
      value_err_percent: 94
    }, {
      name: "电压高不良",
      value_err_count: 20,
      value_err_percent: 4
    }],
    "W1": [{
      name: "电压低不良",
      value_err_count: 30,
      value_err_percent: 94
    }, {
      name: "电压高不良",
      value_err_count: 10,
      value_err_percent: 4
    }],
    "W2": [{
      name: "电压低不良",
      value_err_count: 30,
      value_err_percent: 94
    }, {
      name: "电压高不良",
      value_err_count: 6,
      value_err_percent: 4
    }],
    "2024/4/6": [{
      name: "电压低不良",
      value_err_count: 18,
      value_err_percent: 94
    }, {
      name: "电压高不良",
      value_err_count: 7,
      value_err_percent: 4
    }],
    "2024/4/7": [{
      name: "电压低不良",
      value_err_count: 8,
      value_err_percent: 94
    }, {
      name: "电压高不良",
      value_err_count: 4,
      value_err_percent: 4
    }],
    "2024/4/8": [{
      name: "电压低不良",
      value_err_count: 10,
      value_err_percent: 94
    }, {
      name: "电压高不良",
      value_err_count: 4,
      value_err_percent: 4
    }],
  }

  let op = new lineBar()


  // 获取当前的月份
  // v2.value 当前月

  // 设定横坐标 todo
  let legend = obj[v2.value].map((item) => item.name)

  op.setLegend([])
  op.setXAxis(legend)
  // 设定title todo
  op.setTitle('ocv1不良柏拉图')

  // 设定数据 todo

  let startArr = Array.from({length: legend.length}, () => [])


  let err_count = obj[v2.value].map((item) => item.value_err_count)
  let err_percent = obj[v2.value].map((item) => item.value_err_percent)


  let seriesArr = [
    {
      name: '不良数',
      type: 'bar',
      color: 'rgb(27,207,200)',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: []
    },
    {
      name: '不良率',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        }
      },
      yAxisIndex: 1, // 这个指定的是哪个y轴 todo
      color: 'red',
      data: []
    },
  ]
  op.setData(seriesArr)
  op.setSeriesData([err_count, err_percent])

  Plato.value = op.getChartOption()
}

// 初始化K线图
const initKCharts = () => {
  let op = new candlestick()
  // 横坐标 todo
  let x = ['E3C', 'E3D', 'E3F', 'E3G', 'E3H']
  // candlestick
  op.setTitle('ocv1电压箱线图')
  op.setXAxis(x)

  let series = [
    {
      type: 'candlestick',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42],
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42],
      ]
    },
    {
      name:"a2",
      type: 'line',
      color: "#0028f5",
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [25, 30, 32, 35]
    },
  ]
  op.setData(series)
  voltageBox.value = op.getChartOption()
  console.log('voltageBox', voltageBox)
}
const initData = () => {
  // 初始化数据 & 重新渲染数据
  initYieldRate()
  initThroughRate()
  initPlato()
  initKCharts()
}

onMounted(() => {
  // 初始化数据
  initData()

})


</script>

<style scoped>
#dedicated {
  height: 100vh;
  width: 100vw;
  background: #FDFDFD;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

#dedicated .dedicated-pin-left {
  position: absolute;
  left: 15px;
  top: 10px;
}

#dedicated .item_charts {
  width: 49%;
  height: 49%;
  min-width: 49%;
  min-height: 49%;
  border: 1px solid #00C1DE;
  position: relative;
}

</style>